<template>
    <div class="page-wrapper">
        <div class="header">
<!--            <van-tabs v-model:active="active" title-active-color="#66d6ff" color="#66d6ff" @click-tab="onClickTab">-->
<!--                <van-tab title="团队数据" name="team"></van-tab>-->
<!--                <van-tab title="自营数据" name="direct"></van-tab>-->
<!--                <van-tab title="下级团队数据" name="below"></van-tab>-->
<!--            </van-tabs>-->
        </div>

        <div class="content">
            <div class="title">
                <img src="@/assets/merchant/title.png" alt="" />
                <text>商户月均交易量统计</text>
            </div>

            <div id="myChart"></div>

            <div class="allMerchant">总商户数：{{ jylAllinfo.custNumber }}</div>

            <div class="title" style="margin-top: 18px">
                <img src="@/assets/merchant/title.png" alt="" />
                <text>商户数据</text>
            </div>

            <div class="data">
                <div class="item">
                    <div class="left"></div>
                    <div class="center">
                        <div class="label">忠诚商户</div>
                        <div class="value">月均交易量≥5万</div>
                    </div>
                    <div class="right">{{ jylAllinfo.faithful }}</div>
                </div>
                <div class="item">
                    <div class="left" style="background: #f6d73b"></div>
                    <div class="center">
                        <div class="label">优质商户</div>
                        <div class="value">月均交易量≥5万</div>
                    </div>
                    <div class="right" style="color: #31b74c">{{ jylAllinfo.superior }}</div>
                </div>
                <div class="item">
                    <div class="left" style="background: #31b74c"></div>
                    <div class="center">
                        <div class="label">潜力商户</div>
                        <div class="value">月均交易量≥5万</div>
                    </div>
                    <div class="right" style="color: #f6d73b">{{ jylAllinfo.potential }}</div>
                </div>
                <div class="item">
                    <div class="left" style="background: #ff6d6d"></div>
                    <div class="center">
                        <div class="label">一般商户</div>
                        <div class="value">月均交易量≥5万</div>
                    </div>
                    <div class="right" style="color: #ff6d6d">{{ jylAllinfo.general }}</div>
                </div>
                <div class="item">
                    <div class="left" style="background: #ffab61"></div>
                    <div class="center">
                        <div class="label">低活跃商户</div>
                        <div class="value">月均交易量≥5万</div>
                    </div>
                    <div class="right" style="color: #ffab61">{{ jylAllinfo.lowActiv }}</div>
                </div>
                <div class="item">
                    <div class="left" style="background: #73c0de"></div>
                    <div class="center">
                        <div class="label">不活跃商户</div>
                        <div class="value">{{ '月均交易量<5000' }}</div>
                    </div>
                    <div class="right" style="color: #73c0de">{{ jylAllinfo.mostLowActiv }}</div>
                </div>
                <div class="item">
                    <div class="left" style="background: red"></div>
                    <div class="center">
                        <div class="label">30天无交易</div>
                        <div class="value">月均交易量=0</div>
                    </div>
                    <div class="right" style="color: red">{{ jylAllinfo.noTrade }}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup name="data">
import { agentTransFirstPage, CustMonthAvgTrade } from '@/api/shareData.ts'
const active = ref('direct')
const jylAllinfo = ref([])
const jylData = ref([])
import * as echarts from 'echarts'
const addEcharts = () => {
    // 基于准备好的dom，初始化echarts实例
    document.getElementById('myChart').setAttribute('_echarts_instance_', '')

    var chartDom = document.getElementById('myChart')
    var myChart = echarts.init(chartDom)
    var option

    var option = {
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)',
            position: ['0%', '-7%']
        },
        title: {
            text: '商户占比',
            left: 'center',
            top: '45%',
            textStyle: {
                color: '#000',
                fontSize: 12,
                align: 'center'
            }
        },
        color: ['#ff6d6d', '#f6d73b', '#73c0de', '#31b74c', '#ffab61', '#66d6ff', 'red'],
        series: [
            {
                name: '商户占比',
                type: 'pie',
                radius: ['40%', '60%'],
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 16,
                        fontWeight: 'bold'
                    }
                },
                data: jylData.value,
                // width: 325,
                label: {
                    position: 'outside',
                    show: true,
                    formatter(params) {
                        if (params.name !== '') {
                            return `${params.name}` + `\n${params.percent === undefined ? 0 : params.percent}%`
                        }
                        return ''
                        // correct the percentage
                        // return param.name + ' \n(' + param.percent + '%)'
                    }
                },
                labelLine: {
                    normal: {
                        smooth: 0.2,
                        length: 150 / 20,
                        length2: 150 / 20
                    }
                }
            }
        ]
    }

    option && myChart.setOption(option)
}
// 获取交易量数据
const getJyl = val => {
    CustMonthAvgTrade({
        tag: active.value
    }).then(res => {
        jylAllinfo.value = res.object
        const dataArr = []
        for (let key in res.object) {
            if (key == 'faithful') {
                dataArr.push({ value: res.object[key], name: '忠诚商户' })
            } else if (key == 'superior') {
                dataArr.push({ value: res.object[key], name: '优质商户' })
            } else if (key == 'potential') {
                dataArr.push({ value: res.object[key], name: '潜力商户' })
            } else if (key == 'general') {
                dataArr.push({ value: res.object[key], name: '一般商户' })
            } else if (key == 'lowActiv') {
                dataArr.push({ value: res.object[key], name: '低活跃商户' })
            } else if (key == 'mostLowActiv') {
                dataArr.push({ value: res.object[key], name: '不活跃商户' })
            } else if (key == 'noTrade') {
                dataArr.push({ value: res.object[key], name: '30天无交易商户' })
            }
        }
        jylData.value = dataArr
        addEcharts()
    })
}
const onClickTab = ()=>{
    getJyl()
}
getJyl()
</script>
<style scoped lang="scss">
.page-wrapper {
    background: #ffffff;
}
.header {
    background: #fbfbfb;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.16);
    opacity: 1;
    position: sticky;
    top: 0;
    z-index: 99;
}

.content {
    padding: 18px;
    .title {
        img {
            width: 22px;
            height: 15px;
            margin-right: 10px;
        }
        text {
            font-size: 16px;
            font-family: SimHei;
            font-weight: 400;
            color: #4d4d4d;
            opacity: 1;
        }
    }
    #myChart {
        height: 190px;
        width: 100%;
        padding: 20px 0;
    }
    .allMerchant {
        font-size: 14px;
        font-family: SimHei;
        font-weight: 400;
        color: #4d4d4d;
        padding-bottom: 20px;
        opacity: 1;
        border-bottom: 1px solid #d5d5d5;
    }
    .data {
        padding-top: 20px;
        opacity: 1;
        border-radius: 8px;

        .item {
            padding: 10px;
            margin-top: 10px;
            background: #f8f8f8;
            display: flex;
            .left {
                width: 11px;
                height: 11px;
                background: #66d6ff;
            }
            .center {
                padding: 0 10px;

                flex: 1;
                .label {
                    font-size: 14px;
                    font-family: SimHei;
                    font-weight: 400;
                    color: #4d4d4d;
                }
                .value {
                    font-size: 14px;
                    font-family: SimHei;
                    font-weight: 400;
                    color: #a5a5a5;
                    margin-top: 10px;
                }
            }
            .right {
                font-size: 14px;
                font-family: SimHei;
                font-weight: 400;
                color: #66d6ff;
                line-height: 42px;
            }
        }
    }
}
</style>
